<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>智能银行后台管理系统</h2>
        <p>
          ChatBank是基于通用大语言模型+自研经济行为学习模型的经济行为引导工具。
          为银行构建客户合作生态； 并为每个银行客户提供智能代理人，帮助客户找到合适的资源，提出并及时修正方案，引导正确的行动，达成个体目标和多方合作共赢：<br/>
          1. 帮助银行实现低成本、高效率的“活客-获客-留客”，让客户引导银行业务量增长，提升利润率；<br/>
          2. 帮助企业推动业务模式和技术创新，实现利润提升；<br/>
          3. 帮助个人实现综合财富增长，满足个性化需求；<br/>
          4. 帮助投资机构从海量商机中实现优选，对已投项目提供更多有效资源和专业服务；
        </p>
      </el-col>
    </el-row>
    <hr/>
    <panel-group @handleSetLineChartData="handleSetLineChartData"/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"/>
    </el-row>

  </div>
</template>

<script>
    import PanelGroup from './dashboard/PanelGroup'
    import LineChart from './dashboard/LineChart'
    import RaddarChart from './dashboard/RaddarChart'
    import PieChart from './dashboard/PieChart'
    import BarChart from './dashboard/BarChart'
    import {getStatistics} from "@/api/index";

    const lineChartData = {
        userLogin: {
            expectedData: [],
            type: '访客'
        },
        chatMessage: {
            expectedData: [],
            type: '消息'
        },
        chatCase: {
            expectedData: [],
            type: '案例'
        },
        chatRequire: {
            expectedData: [],
            type: '商机'
        },
        chatRequirePlan: {
            expectedData: [],
            type: '意向合作'
        },
        chatRequireSummary: {
            expectedData: [],
            type: '合作方案'
        }
    }

    export default {
        name: 'Index',
        components: {
            PanelGroup,
            LineChart,
            RaddarChart,
            PieChart,
            BarChart
        },
        created() {
            this.statistics();
        },
        data() {
            return {
                lineChartData: lineChartData.userLogin
            }
        },
        methods: {
            statistics() {
                getStatistics().then(res => {
                    lineChartData.userLogin.expectedData = res.data.userLoginList;
                    lineChartData.chatMessage.expectedData = res.data.chatMessageList;
                    lineChartData.chatCase.expectedData = res.data.chatCaseList;
                    lineChartData.chatRequire.expectedData = res.data.chatRequireList;
                    lineChartData.chatRequirePlan.expectedData = res.data.chatRequirePlanList;
                    lineChartData.chatRequireSummary.expectedData = res.data.chatRequireSummaryList;
                });
            },
            handleSetLineChartData(type) {
                this.lineChartData = lineChartData[type]
            }
        }
    }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
